<template>
  <div class="address">
        <div v-if="addressList.length>0">
          <van-address-list  v-model="chosenAddressId" :list="addressList" :disabled-list="disabledList"
        disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" />

        </div>
        <div class="none" v-else>
          <img src="../../assets/img/empy/暂无记录.png" alt="" style="width:100%;">

          <div class="button" @click="onAdd">添加地址</div>
        </div>
  </div>
</template>

<script>
import { getAddressList } from '@/request/api.js'
export default {
  data() {
    return {
      chosenAddressId: -1,
      disabledList: [
        {
          id: '3',
          name: '阎王爷',
          tel: '00000000000',
          address: '地府',
        },
      ],
      addressList: []
    };
  },
  mounted() {
    getAddressList({ id: localStorage.getItem('userId') }).then(res => {
      this.addressList = res.data
      if(this.addressList.length>0){
        this.addressList.forEach(item=>{
        if(item.isDefault==true) this.chosenAddressId = item.id
      })
      }
    })
  },
  methods: {
    onAdd() {
      this.$router.push('/addressEdit')
    },
    onEdit(item, index) {
      this.$router.push({path:'/addressEdit',query:{isEdit:true,address:JSON.stringify(item)}})
    },
    onDelete() {
      this.$toast('delete');
    }
  },
};
</script>

<style scoped>
  .delete-button {
    height: 100%;
  }
  .button{
    height:40px;
    width:120px;
    background: rgb(67, 191, 236);
    color: #fff;
    text-align: center;
    line-height: 40px;
    margin:0 auto;
  }
.address {
  margin-top: 46px;
  box-sizing: border-box;
}
</style>